<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>移动学术论坛</title>
    <link th:href="@{/js/navbar-fixed-top.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap.min.css}" type="text/css" rel="stylesheet">
    <style>
        body{
            background-color:lightgoldenrodyellow;
            /*background-color: #dff6e5;*/
        }
        #plate ul{
            list-style-type: none;
        }
        #plate span{
            font-size: 22px;
            font-family: 方正舒体;
        }
        #plate ul li {
            margin-top: 10px;
            background-color: #b2dba1;
            text-align: center;
            line-height: 30px;
            border-radius: 17px;
        }
        .cur_scan_name{
            display: block;
            font-size: 21px;
            font-family: 方正舒体;
            margin-top: 15px;
        }
        #cur_scan span{
            margin-top: 10px;
            margin-left: 5px;
            font-size: 20px;
            font-family: 方正舒体;
            display: inline-block;
            list-style-type: none;
            height: 25px;
            text-align: center;
            line-height: 25px;
            border-radius: 5px;
            background-color: #9acfea;
        }
    </style>
</head>
<body >
<nav class="navbar navbar-default navbar-fixed-top" style="background-image: url(/img/bar.jpg)">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/index">移动学术论坛</span></a>
        </div>
        <div class="navbar-collapse collapse">
            <ul id="navbar" class="nav navbar-nav">
                <li class="active"><a href="#index">主页</a></li>
                <li><a href="#about">关于论坛</a></li>
                <li><img th:src="@{/img/money.png}" style="height: 18px;width: 18px;"></li>
                <li><a href="#love">打赏论坛</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right" th:if="${userstatu}==0">
                <li><a href="/login">登录</a></li>
                <li><a href="/register">注册</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right" th:if="${userstatu}==1">
                <li><img th:src="${'/'+user.getImageAddr()}" style="height: 50px;width: 50px;border-radius: 50%"></li>
                <li><a th:href="${'/user/'+user.getUserId()}" th:text="${user.getUserName()}"></a></li>
            </ul>

        </div><!--/.nav-collapse -->
    </div>
</nav>
<div class="container">
    <div class="col-md-2" style="border-right: 2px solid #b9def0;position: fixed;height: 100%;overflow-y:auto ">
        <div id="plate">
            <span>板块信息</span>
            <ul class="plate-item" th:each="p:${platelist}">
                <li>
                    <div style="height: 30px ">
                        <a th:href="${'/showplate/'+p.getPlateId()}" th:text="${p.getPlateName()}"></a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-md-10" style="margin-left: 250px;height: 800px">
        <div class="container-fluid">
            <span class="cur_scan_name" th:text="${plate.getPlateName()}"></span>
            <div style="height: 20px;display: inline-block;float: right;background-color: #b9def0;margin-top: -20px;border-radius: 5px 5px 0 0">本版置顶</div>
            <div class="container-fluid" style="border: 4px solid #b9def0;border-radius: 10px 0 10px 10px;height: 120px;">
                <span style="font-weight: bold;display:inline-block;margin-top: 10px">版主ID:</span><a th:href="'/user/'+${plate.user.getUserId()}" th:text="${plate.user.getUserName()}"></a><br>
                <span style="font-weight: bold;display:inline-block;">版面创建日期：</span><a th:text="${plate.getPlateDate()}"></a>
                <span style="font-weight: bold;display:block;">版面介绍：</span>
                <p th:text="${plate.getPlateDescribe()}"></p>
            </div>
            <hr>
            <div>
                <p style="font-weight: bold;display: inline-block;margin-left: 20px">帖子总数：<span>23</span></p>
                <button class="btn btn-info" style="display: inline-block;float: right;margin-right: 20px"><span class=" glyphicon glyphicon-plus " aria-hidden="true"></span>发帖</button>
            </div>
            <div class="container-fluid" style="height: 700px;">
                <table class="table">
                    <thead>
                        <tr class="active" style="background-color: #9acfea">
                            <th>标题</th>
                            <th>作者名称</th>
                            <th>点击</th>
                            <th>评论</th>
                            <th>收藏</th>
                            <th>创建日期</th>
                        </tr>
                    </thead>
                    <tbody th:each="post:${postslist}">
                        <tr>
                            <th><a th:href="'/showposts/'+${post.getPostsId()}" th:text="${post.getPostsTitle()}"></a><span class="glyphicon glyphicon-fire" style="color: red;display: inline-block"></span></th>
                            <th><a th:href="'/user/'+${post.user.getUserId()}" th:text="${post.user.getUserName()}"></a></th>
                            <th th:text="${post.getClick()}"></th>
                            <th th:text="${post.getReplyCount()}"></th>
                            <th th:text="${post.getAgree()}"></th>
                            <th th:text="${post.getPostsDate()}"></th>
                        </tr>
                    </tbody>
                </table>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <hr>

        </div>
    </div>
</div>
<footer>
    <div class="footer-container">
        <div class="footer-link">
            <div class="footer-link-item">

            </div>
        </div>
    </div>
</footer>
<script th:src="@{/js/jquery-3.3.1.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script>
    $(".num li").mouseover(function () {
        $(this).addClass("current").siblings().removeClass("current");
        var index = $(this).index();
        i = index;
        $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
    });
    var time = setInterval(move,1500);
    var i=0;
    function move() {
        if (i==4){
            i=-1;
        }
        i++;
        $(".num li").eq(i).addClass("current").siblings().removeClass("current");
        $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }
    function moveL(){
        if (i==0){
            i=5;
        }
        i--;
        $(".num li").eq(i).addClass("current").siblings().removeClass("current");
        $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }
    $(".outer").hover(function () {
        clearInterval(time)
    },function () {
        time=setInterval(move,1500)
    })
    $(".left-btn").click(function () {
        move();
    });
    $(".right-btn").click(function () {
        move();
    })

</script>
</body>
</html>